<template>
	<wsPage title="中转仓列表">
		<div slot="page_operate">
			<Button @click="refresh"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		<wsSmPanel :page="table.page" @page-change="query" @simple-query="query">
			<div slot="query_form">
				<Form :model="queryForm" :label-width="100" inline>
					<FormItem label="仓库名称">
						<Input v-model="queryForm.model.name" placeholder="请输入"></Input>
					</FormItem>
					<FormItem label="状态">
						<Select v-model="queryForm.model.status" clearable class="ws-form-select">
							<Option :value="1">待上线</Option>
							<Option :value="2">已上线</Option>
						</Select>
					</FormItem>
				</Form>
			</div>
			<div slot="list_operate">
				<Button @click="showAddModal">新增中转仓</Button>
			</div>
			<div slot="list_data">
				<ws-table :data="table.data" style="width: 100%">
					<ws-table-column align="center" prop="name" label="名称" min-width="160"></ws-table-column>
					<ws-table-column align="center" prop="consignee" label="收货人" min-width="100"></ws-table-column>
					<ws-table-column align="center" prop="consigneePhone" label="收货人联系方式" min-width="150"></ws-table-column>
					<ws-table-column align="center" prop="contacts" label="仓库联系人" min-width="100"></ws-table-column>
					<ws-table-column align="center" prop="contactsPhone" label="仓库联系人方式" min-width="150"></ws-table-column>
					<ws-table-column align="center" prop="longitude" label="经度" width="80"></ws-table-column>
					<ws-table-column align="center" prop="latitude" label="纬度" width="80"></ws-table-column>
					<ws-table-column align="center" prop="address" label="地址信息" min-width="200"></ws-table-column>
					<ws-table-column align="center" label="状态" fixed="right" width="100">
						<template slot-scope="scope">
							<Tag v-if="scope.row.status == 1" color="blue">待上线</Tag>
							<Tag v-if="scope.row.status == 2" color="green">已上线</Tag>
						</template>
					</ws-table-column>
					<ws-table-column align="center" width="150" fixed="right" label="操作">
						<template slot-scope="scope">
							<Button @click="showEditModal(scope.row)" type="text" v-if="scope.row.status == 1" size="small">编辑</Button>
							<Button @click="onModalRow(scope.row)" type="text" size="small" v-if="scope.row.status == 1">上线</Button>
							<Button @click="offModalRow(scope.row)" type="text" size="small" v-if="scope.row.status == 2">下线</Button>
							<Button @click="delModalRow(scope.row)" type="text" size="small" v-if="scope.row.status == 1">删除</Button>
						</template>
					</ws-table-column>
				</ws-table>
			</div>
		</wsSmPanel>

		<!--新增属性弹框-->
		<wsModal v-model="modal.show" ok-text="保存" :title="modal.title" @on-ok="modalSave" @on-cancel="modalCancel">
			<Form ref="modalForm" :model="modal.form" :rules="modal.validate" :label-width="120">
				<FormItem label="名称" prop="name">
					<Input v-model="modal.form.name" autofocus></Input>
				</FormItem>
				<FormItem label="收货人" prop="consignee">
					<Input v-model="modal.form.consignee"></Input>
				</FormItem>
				<FormItem label="收货人联系方式" prop="consigneePhone">
					<Input v-model="modal.form.consigneePhone"></Input>
				</FormItem>
				<FormItem label="仓库联系人" prop="contacts">
					<Input v-model="modal.form.contacts"></Input>
				</FormItem>
				<FormItem label="仓库联系人方式" prop="contactsPhone">
					<Input v-model="modal.form.contactsPhone"></Input>
				</FormItem>
				<FormItem label="经度" prop="longitude">
					<InputNumber @on-blur="marketLongitudeFormatter()" v-model="modal.form.longitude"></InputNumber>
				</FormItem>
				<FormItem label="纬度" prop="latitude">
					<InputNumber @on-blur="marketLatitudeFormatter()" v-model="modal.form.latitude"></InputNumber>
				</FormItem>
				<FormItem label="仓库地址" prop="address">
					<Input v-model="modal.form.address" type="textarea" :rows="2"></Input>
				</FormItem>
				<FormItem label="仓库描述" prop="wDesc">
					<Input v-model="modal.form.wDesc" type="textarea" :rows="5"></Input>
				</FormItem>
			</Form>
		</wsModal>
	</wsPage>
</template>

<script>
	import Util from '../../../common/util.js';
	import Common from '../../../common/common.js';
	export default {
		data() {
			return {
				table: {
					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					}
				},
				queryForm: {
					model: {
						name: '',
						status: ''
					}
				},
				//新增属性弹框
				modal: {
					title: '添加平台语言',
					show: false,
					form: {
						id: null,
						name: '',
						wDesc: '',
						address: '',
						longitude: 0,
						latitude: 0,
						consignee: '',
						consigneePhone: '',
						contacts: '',
						contactsPhone: ''
					},
					validate: {
						name: [{
							required: true,
							message: '仓库名称必填',
							trigger: 'blur'
						}],
						address: [{
							required: true,
							message: '仓库地址必填',
							trigger: 'blur'
						}],
						longitude: [{
							required: true,
							message: '仓库经度必须填写'
						}],
						latitude: [{
							required: true,
							message: '仓库纬度必须填写'
						}],
						consignee: [{
							required: true,
							message: '收货人必须填写'
						}],
						consigneePhone: [{
							required: true,
							message: '收货人联系方式必须填写'
						}],
						contacts: [{
							required: true,
							message: '仓库联系人必须填写'
						}],
						contactsPhone: [{
							required: true,
							message: '仓库联系人方式必须填写'
						}]
					}
				}
			}
		},
		computed: {
			isEdit() {
				return !Util.vad.isBlank(this.modal.form.id);
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.query();
			},
			/**
			 * 表单查询
			 */
			query() {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				this.axios.get('/ws/ops/v2/transferstorehouses/' + pageSize + '/' + pageNum, {params: this.queryForm.model}).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						_this.buildPageData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				this.table.data = data_.list;
				this.table.page.total = data_.total;
			},

			//刷新重置查询
			refresh() {
				this.table.data = [];
				this.table.page.total = 0;
				this.table.page.pageNum = 1; //当前页
				this.table.page.pageSize = 10; //每页显示条数
				
				this.queryForm.model.name = '';
				this.queryForm.model.status = '';
				this.query();
			},
			/**
			 * 打开新增模态框
			 */
			showAddModal() {
				this.modal.title = '新增中转仓';
				this.modal.show = true;
			},
			/**
			 * 重置弹框表单
			 */
			resetModalForm() {
				this.$refs['modalForm'].resetFields();
				this.modal.form.id = null;
				this.modal.form.name = '';
				this.modal.form.wDesc = '';
				this.modal.form.address = '';
				this.modal.form.longitude = 0;
				this.modal.form.latitude = 0;
				this.modal.form.consignee = '';
				this.modal.form.consigneePhone = '';
				this.modal.form.contacts = '';
				this.modal.form.contactsPhone = '';
			},
			marketLongitudeFormatter() {
				this.modal.form.longitude = parseFloat(parseFloat(this.modal.form.longitude).toFixed(2));
			},
			marketLatitudeFormatter(row) {
				this.modal.form.latitude = parseFloat(parseFloat(this.modal.form.latitude).toFixed(2));
			},
			/**
			 * 模态框保存
			 */
			modalSave() {
				this.$refs['modalForm'].validate((valid) => {
					if(valid) {
						this.submitModal();
					}
				});
			},
			/**
			 * 提交模态框事件
			 */
			submitModal() {
				if(this.isEdit) {
					this.editModal();
				} else {
					this.saveModal();
				}
			},
			/**
			 * 保存模态框
			 */
			saveModal() {
				let postData_ = this.modal.form;
				const _this = this;
				this.axios.post('/ws/ops/v2/transferstorehouse', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('新增物流中转仓成功');
						_this.modalCancel();
						_this.init();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('新增物流中转仓失败:' + message_);
					}
				});
			},
			/**
			 * 修改模态框
			 */
			editModal() {
				let postData_ = this.modal.form;
				const _this = this;
				this.axios.put('/ws/ops/v2/transferstorehouse', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('修改物流中转仓成功');
						_this.modalCancel();
						_this.init();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('修改物流中转仓失败:' + message_);
					}
				});
			},
			/**
			 * 模态框取消
			 */
			modalCancel() {
				this.resetModalForm();
				this.modal.show = false;
			},
			/**
			 * 打开新增模态框
			 */
			showEditModal(rowData) {
				this.modal.title = '修改中转仓';
				this.initModalData(rowData.id);
			},
			/**
			 * 初始化模态框数据
			 */
			initModalData(dataId) {
				let _this = this;
				this.axios.get('/ws/ops/v2/transferstorehouses/' + dataId).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						_this.buildModalData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建模态框的图片
			 */
			buildModalData(data) {
				this.modal.form.id = data.id;
				this.modal.form.name = data.name;
				this.modal.form.wDesc = data.wDesc;
				this.modal.form.address = data.address;
				this.modal.form.longitude = data.longitude;
				this.modal.form.latitude = data.latitude;
				this.modal.form.consignee = data.consignee;
				this.modal.form.consigneePhone = data.consigneePhone;
				this.modal.form.contacts = data.contacts;
				this.modal.form.contactsPhone = data.contactsPhone;

				this.modal.show = true;
			},
			onModalRow(row_) {
				
				const _this = this;
				this.$confirm({
					title: "操作提示",
					width: 300,
					content: "你确认上线该中转仓吗?",
					onOk: function() {
						_this.onTransfer(row_.id);
					}
				});
			},
			offModalRow(row_) {
				
				const _this = this;
				this.$confirm({
					title: "操作提示",
					width: 300,
					content: "你确认下线该中转仓吗?",
					onOk: function() {
						_this.offTransfer(row_.id);
					}
				});
			},
			/**
			 * 上线中转仓
			 */
			onTransfer(dataId) {
				let _this = this;
				this.axios.put('/ws/ops/v2/transferstorehouse/status/on/' + dataId).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('上线物流中转仓成功');
						_this.init();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('上线物流中转仓失败:' + message_);
					}
				});
			},
			/**
			 * 下线中转仓
			 */
			offTransfer(dataId) {
				let _this = this;
				this.axios.put('/ws/ops/v2/transferstorehouse/status/off/' + dataId).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('下线物流中转仓成功');
						_this.init();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('下线物流中转仓失败:' + message_);
					}
				});
			},
			/**
			 * 删除
			 */
			delModalRow(row_) {
				
				const _this = this;
				this.$confirm({
					title: "操作提示",
					width: 300,
					content: "你确认删除本条记录吗?",
					onOk: function() {
						_this.delTransfer(row_.id);
					}
				});
			},
			/**
			 * 删除中转仓
			 */
			delTransfer(dataId) {
				let _this = this;
				this.axios.delete('/ws/ops/v2/transferstorehouses/' + dataId).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						_this.$Message.success('删除中转仓成功');
						_this.init();
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 格式化
			 */
			tparse(str) {
				return twemoji.parse(str);
			}
		}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 162px;
	}
	
	.title-row {
		padding: 10px;
	}
	
	.ws-icon {
		font-size: 30px;
	}
</style>
<style>
	img.emoji {
		width: 2em !important;
		height: 2em !important;
	}
</style>